<template>
  <view class="eshop-consult-page">
    <view class="first-img-wrapper">
      <image style="width: 750rpx;" :src="staticImgs.img1"  mode="widthFix"></image>
      <view class="price-wrapper-pos">
        <view class="price-wrapper">
          <view class="left-wrapper">
            <view class="tip-text">优惠价</view>
            <view class="num-box">
              <view class="unit">¥</view>
              <view class="num">{{price_1}}</view>
            </view>
            <view class="info-box">
              /20分钟
            </view>
          </view>
          <view class="right-wrapper">
            <view class="tip-text">原价</view>
            <view class="num-box">
              <view class="unit">¥</view>
              <view class="num">{{price_2}}</view>
            </view>
            <view class="info-box">
              /20分钟
            </view>
          </view>
        </view>
      </view>
    </view>
    <image style="width: 750rpx;" :src="img" v-for="(img,index) in imgsArr" mode="widthFix"></image>
    <view class="btn-position">
      <view class="btn-box" @click="bottomModalVisible = true">
        立即预约
      </view>
    </view>

    <u-popup :show="bottomModalVisible" mode="bottom" @close="closeHandle" bgColor="transparent">
      <view class="bottom-modal">
        <view class="tip-text">选择咨询时长</view>
        
        <view class="select-opts-wrapper">
          <view class="select-opt-box" 
            :class="{'select-opt-box-act': currentIndex===index}" 
            v-for="(goods,index) in goodsList" 
            :key="index"
            @click="changeGoodsIndex(index)"
          >
            <view class="top-box">
              <view class="tit">{{goods.price}}元</view>
              <view class="con">({{goods.minuteTime}})</view>
            </view>
            <view class="bottom-box">{{goods.introduce}}</view>
            <view class="more-info-abs" v-if="index==2">
              86%的用户选择
            </view>
          </view>
        </view>
        
        
        <view class="tip-sub-tit">联系手机</view>
        <view class="phone-input-box">
          <!-- <input placeholder-class="input-placeholder" placeholder="请输入手机号"  type="tel" confirm-type="done" v-model="phone" /> -->
          <u--input placeholder-class="input-placeholder" placeholder="请输入手机号"  type="tel" confirm-type="done" v-model="phone" />
        </view>
        <view class="tip-sub-text">购买后，咨询顾问会在15分钟内联系您留下的手机安排咨询</view>
        <view class="confirm-age-box">
           <u-checkbox-group
              v-model="confirmAge"
          >
            <u-checkbox
                :customStyle="{fontSize: '26rpx',color:'#666'}"
                :size="15"
                activeColor="#78D06B"
                label="我已经年满19周岁"
                name="我已经年满19周岁"
            >
            </u-checkbox>
          </u-checkbox-group>
          
        </view>
        
        <view class="row-1">
          <!-- <view class="text-tip">10分钟<text class="unit">（¥16/10分钟）</text></view> -->
          <!-- <view class="num-box">
            <u-number-box bgColor="#fff" :min="3" :step="3" :max="18" v-model="purchaseNum" @change="valChange">
              <view slot="minus" class="minus">
                <u-icon name="minus" :color="minColor" size="12"></u-icon>
              </view>
              <text slot="input" class="input">{{purchaseNum}}</text>
              <view slot="plus" class="plus">
                <u-icon name="plus" size="12" :color="plusColor"></u-icon>
              </view>
            </u-number-box>
          </view> -->
        </view>
        
        <view class="row-2">
          <view class="left-price">
            <view class="text-base">{{currentGoods.price}}<text class="text-unit">元</text></view>
            <view class="text-p">原价{{currentGoods.halfPrice}}元</view>
          </view>
          <view class="right-box">
            <view class="btn-box" @click="toPay">
              立即购买
            </view>
            <view class="text-p">
              每个用户仅能购买一次
            </view>
          </view>
        </view>
        
        
        
      </view>
    </u-popup>
  </view>
</template>

<script>
  import {
    orderPayment,
  } from '@/common/api/index_api.js'
  import {
    debounce
  } from 'lodash'
  import {
  	mapGetters
  } from 'vuex'
  export default {
    data() {
      return {
        staticImgs: {
          img1: this.imgBaseURL + '/consult/eshop-consult-1-v3.png',
          img2: this.imgBaseURL + '/consult/eshop-consult-2.png',
          img3: this.imgBaseURL + '/consult/eshop-consult-3.png',
          img4: this.imgBaseURL + '/consult/eshop-consult-4-v2.png',
        },
        imgsArr: [],
        bottomModalVisible: false,
        purchaseNum: 3,
        loading:false,
        goodsList:[],
        currentIndex:2,
        phone:'',
        confirmAge:[],
        price_1:null,
        price_2:null,
        shareData: {
          title: '暖心心理咨询',
          path: '/pages/index/index?userType=e-consult',
          imageUrl: this.imgBaseURL + "/share/share-consult.png",
          desc: '',
          content: ''
        },
      }
    },
    computed: {
      ...mapGetters('user', [
        'hasPhone'
      ]),		
      currentGoods(){
        return this.goodsList[this.currentIndex]
      },
      minColor() {
        return this.purchaseNum == 3 ? '#bcc1ce' : '#000'
      },
      plusColor() {
        return this.purchaseNum == 18 ? '#bcc1ce' : '#000'
      },
      price() {
        return 16 * this.purchaseNum
      },
      discountPrice() {
        return 51 * this.purchaseNum
      }
    },
    async onLoad() {
      this.imgsArr = [
        // this.staticImgs.img1,
        this.staticImgs.img2,
        this.staticImgs.img3,
        this.staticImgs.img4
      ]
      
      
      await this.initPageData()
    },
    methods: {
      changeGoodsIndex(index){
        this.currentIndex = index
      },
      async initPageData(){
        const resArr = await Promise.all([this.$u.api.getEshopConsultGoodsList()])
        console.log(resArr,'=========getEshopConsultGoodsList')
        
        resArr.forEach((res,index)=>{
          
          console.log(res,'========res')
          
          if(res.data.code == 200){
            if(index == 0){
              const {data:dRes} = res.data
              // console.log(dRes,'===========dRes')
              this.goodsList = dRes
              
              this.price_1 = dRes[0].price
              this.price_2 = dRes[0].halfPrice
            }
          }
        })
        
      },
      valChange(e) {
        console.log('当前值为: ' + e.value)
      },
      closeHandle() {
        this.bottomModalVisible = false
      },
      toPay: debounce(async function() {
        // if(!this.hasPhone){
        //   return uni.navigateTo({
        //     url: '/subcontractorA/authorization/authorization'
        //   })
        // }
        if (this.loading) return
        
        if(!this.phone){
          return this.$showToast('请输入手机号')
        }
        //限制输入长度
        if(this.phone.length !== 11){
          return this.$showToast('请输入正确的手机号')
        }
        
        if(this.confirmAge.length === 0){
          return this.$showToast('请确认是否已满19周岁')
        }
        
        console.log(this.confirmAge,'=========confirmAge')
        
        uni.showLoading()
        this.loading = true
        const that = this
        orderPayment({
          orderType:'10',
          virtualGoodsUid:this.goodsList[this.currentIndex].virtualGoodsUid,
          phone:this.phone
        }).then((res) => {
          if (res.data.code == 200) {
            uni.requestPayment({
              provider: 'wxpay',
              service: 5,
              orderInfo: res.data.data.wr,
              timeStamp: res.data.data.wr.timeStamp,
              nonceStr: res.data.data.wr.nonceStr,
              package: res.data.data.wr.packageValue,
              signType: res.data.data.wr.signType,
              paySign: res.data.data.wr.paySign,
              success: function(res) {
                console.log(res, '=======pat success')
                that.$showToast("充值成功")
                setTimeout(()=>{
                  that.$store.commit('user/setIsShowEconsultBlock',false)
                  uni.redirectTo({
                    url:'/pages/consultAccount/consultAccount?showEshopTip=1'
                  })
                },300)
              },
              fail: function(err) {
                console.log(err, '======err')
                that.$showToast('支付失败');
              }
            });
          }
          if (res.data.code == 4011005) {
            that.$showToast(res.data.message)
          }
        }).finally(()=>{
          setTimeout(()=>{
            uni.hideLoading()
            this.loading = false
          },400)
        })
      }, 400)
    }
  }
</script>

<style lang="scss" scoped>
  .eshop-consult-page {
    min-height: 100vh;
    width: 100vw;
    box-sizing: border-box;
    position: relative;
    
    display: flex;
    flex-direction: column;
    
    .first-img-wrapper{
      position: relative;
      
        
      .price-wrapper-pos{
        position: absolute;
        left:0;
        right: 0;
        bottom: 100rpx;
        .price-wrapper{
          width: 414rpx;
          margin: auto;
          height: 160rpx;
          display: flex;
          align-items: flex-end;
          // background-color: red;
          
          .left-wrapper{
            width: 250rpx;
            height: 160rpx;
            box-sizing: border-box;
            padding-left: 26rpx;
            padding-top: 8rpx;
            
            .tip-text{
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              font-size: 24rpx;
              color: #FFFFFF;
              line-height: 33rpx;
              text-align: left;
              font-style: normal;
              
              
            }
            
            .num-box{
              margin: -12rpx 0;
              margin-bottom: -26rpx;
              
              .unit{
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                font-size: 50rpx;
                color: #FFFFFF;
                line-height: 114rpx;
                text-align: left;
                font-style: normal;
              }
              .num{
                font-family: SourceHanSansCN, SourceHanSansCN;
                font-weight: 800;
                font-size: 70rpx;
                color: #FFFFFF;
                line-height: 105rpx;
                text-align: left;
                font-style: normal;
              }
            }
            
            .info-box{
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              font-size: 20rpx;
              color: #FFFFFF;
              line-height: 28rpx;
              text-align: left;
              font-style: normal;
            }
            
          }
          .right-wrapper{
            width: 164rpx;
            height: 124rpx;
            // background-color: blue;
            
            text-align: right;
            box-sizing: border-box;
            padding-top: 10rpx;
            padding-right: 20rpx;
            
            .tip-text{
              font-family: PingFang-SC, PingFang-SC;
              font-weight: 500;
              font-size: 24rpx;
              color: #763A0E;
              line-height: 33rpx;
              // text-align: left;
              font-style: normal;
              
            }
            
            .num-box{
              justify-content: flex-end;
                  align-items: flex-end;
                      margin-top: -10rpx;
                      margin-bottom: -8rpx;

              .unit{
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 500;
                font-size: 28rpx;
                color: #92582E;
                line-height: 38rpx;
                // text-align: left;
                font-style: normal;
                
                margin-bottom: 8rpx;
              }
              .num{
                font-family: SourceHanSansCN, SourceHanSansCN;
                font-weight: bold;
                font-size: 44rpx;
                color: #92582E;
                line-height: 66rpx;
                // text-align: left;
                font-style: normal;
              }
            }
            
            .info-box{
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              font-size: 14rpx;
              color: #763A0E;
              line-height: 20rpx;
              // text-align: left;
              font-style: normal;
            }
            
            
            .num-box{
              justify-content: flex-end;
            }
          }
          
          .num-box{
            display: flex;
            
          }
        }
        
      }
    }

    .btn-position {
      position: fixed;
      bottom: 6vh;
      left: 0;
      right: 0;
      z-index: 1;

      .btn-box {
        width: 532rpx;
        margin: auto;
        height: 82rpx;
        background: linear-gradient(90deg, #FFC668 0%, #FFD970 100%);
        box-shadow: 0rpx 8rpx 4rpx 0rpx #D8850F;
        border-radius: 41rpx;

        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 36rpx;
        color: #7D2505;
        line-height: 50rpx;
        text-align: center;
        font-style: normal;

        line-height: 82rpx;
        text-align: center;
      }
    }

  }

  // /deep/.row-1 .num-box .u-number-box__minus{
  //   border-bottom-left-radius: 26rpx !important;
  //   border-top-left-radius: 26rpx !important;
  // } 
  // /deep/.row-1 .num-box .u-number-box__plus{
  //   border-bottom-right-radius: 26rpx !important;
  //   border-top-right-radius: 26rpx !important;
  // }
  // /deep/.row-1 .num-box .u-number-box__input{
  //   margin: 0 !important;
  //   border-left: 1rpx solid #C8C7C7 !important;
  //   border-right: 1rpx solid #C8C7C7 !important;
  //   background: #FFFFFF !important;
  // }
  // /deep/.row-1 .num-box .u-number-box__plus--disabled{
  //   background-color: #fff !important;
  // }



  .row-1 .num-box {
    background: #FFFFFF;
    border-radius: 27rpx;
    border: 1rpx solid #C8C7C7;

    .minus {
      width: 52rpx;
      line-height: 54rpx;
      border-bottom-left-radius: 26rpx;
      border-top-left-radius: 26rpx;

      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 7rpx;
    }

    .input {
      // padding: 0 10px;
      width: 52rpx;

      color: #000;
      border: 1rpx solid #C8C7C7;
      text-align: center;
      border-top: none;
      border-bottom: none;
    }

    .plus {
      margin-top: 7rpx;
      width: 52rpx;
      line-height: 54rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      border-bottom-right-radius: 26rpx;
      border-top-right-radius: 26rpx;
    }
  }


  .bottom-modal {
    width: 750rpx;
    // height: 447rpx;
    background: #FFFFFF;
    border-radius: 34rpx 34rpx 0rpx 0rpx;
    padding: 0 34rpx;
    box-sizing: border-box;
    
    padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));  

    .tip-text {
      margin-top: 40rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 34rpx;
      color: #333333;
      line-height: 48rpx;
      text-align: left;
      font-style: normal;
    }
    
    .tip-sub-tit{
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 30rpx;
      color: #333333;
      line-height: 42rpx;
      text-align: left;
      font-style: normal;
      
      margin-top: 30rpx;
    }
    
    .phone-input-box{
      width: 450rpx;
      height: 64rpx;
      border-radius: 4rpx;
      border: 1rpx solid #DBD9D9;
      margin-top: 10rpx;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 0 14rpx;
      
      input{
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 30rpx;
        color: #333333;
        // line-height: 42rpx;
        text-align: left;
        font-style: normal;
        line-height: 64rpx;
      }
      
      /deep/.input-placeholder{
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 30rpx;
        color: #D3D3D3;
        // color: red;
        line-height: 42rpx;
        text-align: left;
        font-style: normal;
      }
    }
    
    .select-opts-wrapper{
      display: flex;
      justify-content: center;
      column-gap: 26rpx;
      margin-top: 40rpx;
      
      
      .select-opt-box{
        width: 210rpx;
        // overflow: hidden;
        // height: 150rpx;
        height: 200rpx;
        border-radius: 14rpx;
        border: 1rpx solid #DBD9D9;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
        position: relative;
        
        .top-box{
          width: 100%;
          height: 128rpx;
          display: flex;
          align-items: center;
          // justify-content: center;
          flex-direction: column;
          padding-top: 30rpx;
          box-sizing: border-box;
        }
        
        .tit{
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 34rpx;
          color: #333333;
          line-height: 48rpx;
          text-align: left;
          font-style: normal;
        }
        .con{
          margin-top: 12rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 22rpx;
          color: #333333;
          line-height: 30rpx;
          text-align: center;
          font-style: normal;
        }
        .bottom-box{
          // width: 210rpx;
          width: 100%;
          height: 71rpx;
          box-sizing: border-box;
          padding: 0 12rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #F7F7F7;
          border-radius: 0rpx 0rpx 14rpx 14rpx;
          
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 20rpx;
          color: #333333;
          line-height: 28rpx;
          text-align: center;
          font-style: normal;
        }
        
        
        .more-info-abs{
          position: absolute;
          left: 0;
          top: -21rpx;
          
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 22rpx;
          color: #FFFFFF;
          line-height: 30rpx;
          text-align: center;
          font-style: normal;
          padding: 6rpx 12rpx;
          
          background: #FF6672;
          border-radius: 20rpx 0rpx 20rpx 0rpx;
        }
        
        
        
      }
    
      .select-opt-box-act{
        border: 3rpx solid #FF6672;
      }
    }

    .tip-sub-text {
      margin-top: 16rpx;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #666666;
      line-height: 37rpx;
      text-align: left;
      font-style: normal;
    }
    
    .confirm-age-box{
      justify-content: flex-end;
      margin-top: 42rpx;
      display: flex;
      align-items: center;
      font-weight: 400;
      font-size: 26rpx;
      color: #666666;
      line-height: 37rpx;
      text-align: left;
      font-style: normal;
    }

    .row-1,
    .row-2 {
      display: flex;
      justify-content: space-between;

    }

    .row-1 {
      margin-top: 40rpx;

      .text-tip {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 36rpx;
        color: #333333;
        line-height: 50rpx;
        text-align: center;
        font-style: normal;

        .unit {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 22rpx;
          color: #333333;
          line-height: 30rpx;
          text-align: center;
          font-style: normal;
        }
      }
    }

    .row-2 {
      // margin-top: 26rpx;
      box-sizing: border-box;
      // padding-top: 8rpx;
      border-top: 1rpx solid #EBEBEB;
      display: flex;
      justify-content: space-between;
      height: 144rpx;
      box-sizing: border-box;
      

      .left-price {
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 50rpx;
        color: #FF6672;
        // line-height: 70rpx;
        text-align: left;
        font-style: normal;
        
        display: flex;
        flex-direction: column;
        justify-content: center;
        

        .text-unit {
          // font-family: PingFangSC, PingFang SC;
          // font-weight: 400;
          // font-size: 32rpx;
          color: #FF6672;
          // line-height: 45rpx;
          text-align: left;
          font-style: normal;
          margin-left: 4rpx;
          
          
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          font-size: 22rpx;
          color: #FF6672;
          // line-height: 30rpx;
          text-align: left;
          font-style: normal;
        }

        .text-p {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 26rpx;
          color: #FF6672;
          // line-height: 37rpx;
          text-align: left;
          font-style: normal;
          
          //添加删除线
          text-decoration: line-through;
        }

      }
      
      .right-box{
        display: flex;
        flex-direction: column;
        justify-content: center;
        
        
        .text-p{
          margin-top: 6rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 22rpx;
          color: #333333;
          // line-height: 30rpx;
          text-align: center;
          font-style: normal;
        }
      }

      .btn-box {
        // margin-top: 18rpx;
        width: 290rpx;
        height: 70rpx;
        background: #78D06B;
        border-radius: 43rpx;
        

        line-height: 70rpx;
        text-align: center;

        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 32rpx;
        color: #FFFFFF;
        text-align: center;
        font-style: normal;

      }

    }


  }
</style>